.layout-3 {
  .num {
    position: absolute;
    //border-top: 1px solid #e8eaec;
    //border-bottom: 1px solid #e8eaec;
    //border-left: 1px solid #e8eaec;
    border: 1px solid #e8eaec;
  }
  .num-1 {
    top: 0;
    right: 50%;
    bottom: 0;
    left: 0;
  }
  .num-2 {
    top: 0;
    right: 0;
    bottom: 50%;
    left: 50%;
  }
  .num-3 {
    top: 50%;
    right: 0;
    bottom: 0;
    left: 50%;
  }
  .num-4 {
    display: none;
  }
}

.layout-5 {
  .num {
    position: absolute;
    border: 1px solid #e8eaec;
  }
  .num-1, .num-2, .num-3 {
    top: 0;
    bottom: 50%;
    width: 33.33%;
  }
  .num-2 {
    left: 33.33%;
  }
  .num-3 {
    left: calc( 33.33% * 2);
  }
  .num-4, .num-5 {
    width: 50%;
    top: 50%;
    bottom: 0;
  }
  .num-5 {
    left: 50%;
  }
  .num-6 {
    display: none;
  }
}


.layout-6 {
  .num {
    position: absolute;
    border: 1px solid #e8eaec;
  }
  .num-1, .num-2, .num-3 {
    top: 0;
    bottom: 50%;
    width: 33.33%;
  }
  .num-2 {
    left: 33.33%;
  }
  .num-3 {
    left: calc( 33.33% * 2);
  }
  .num-4, .num-5, .num-6 {
    width: 33.33%;
    top: 50%;
    bottom: 0;
  }
  .num-5 {
    left: 33.33%;
  }
  .num-6 {
    left: calc( 33.33% * 2 );
  }
}

.layout-8 {
  .num {
    position: absolute;
    border: 1px solid #e8eaec;
  }
  .num-1, .num-2, .num-3 {
    top: 0;
    bottom: 33.33% * 2;
    width: 33.33%;
  }
  .num-2 {
    left: 33.33%;
  }
  .num-3 {
    left: 33.33% * 2;
  }
  .num-4, .num-5, .num-6 {
    width: 33.33%;
    top: 33.33%;
    bottom: 33.33%;
  }
  .num-4 {
    // 覆盖api提供的默认样式
    left: 0;
    right: 0;
  }
  .num-5 {
    left: 33.33%;
  }
  .num-6 {
    left: 33.33% * 2;
  }
  .num-7, .num-8 {
    width: 50%;
    top: 33.33% * 2;
    bottom: 0;
  }
  .num-7 {
    // 覆盖api的默认样式
    left: 0;
    right: 0;
  }
  .num-8 {
    left: 50%;
  }
}

//.layout-5 {
//  height: 100%;
//  & > div {
//    display: flex;
//    flex-wrap: wrap;
//    height: 100%;
//  }
//  .num {
//    width: 33.333%;
//    border: 1px solid #e8eaec;
//  }
//  .num-4, .num-5 {
//    flex: 2;
//  }
//  .num-6 {
//    display: none;
//  }
//}